<!-- <template>
	<div class="common-load">
		<div class="huan-loader"></div>
	</div>
</template>

<style lang="stylus" scoped>
	/* http://loading.awesomes.cn/ */
	.common-load
		z-index:999999
		position:fixed
		top:0
		left:0
		right:0
		bottom:0
		display:flex
		align-items:center
		// background:hsla(0,0%,100%,.94)
		justify-content: center
		background:#fff
	.huan-loader 
		  width: 100px
		  height: 100px
		  box-sizing: border-box
		  border: 6px solid transparent
		  border-top-color: #409EFF
		  border-bottom-color: #409EFF
		  border-radius: 50%
		  animation: huan-rotate 750ms linear infinite
	@keyframes huan-rotate 
		0% 
			transform: rotate(0)
		100% 
			transform: rotate(360deg)
</style>
 -->





<template>
	<div class="common-load">
		<div class="ball-scale">
			<div></div>
		</div>
	</div>
</template>

<style lang="stylus" scoped>
	/* http://loading.awesomes.cn/ */
	.common-load
		z-index:999999
		position:fixed
		top:0
		left:0
		right:0
		bottom:0
		display:flex
		align-items:center
		//background:hsla(0,0%,100%,.94)
		background:#fff
		justify-content: center
		.ball-scale 
			transform: scale(1)
		.ball-scale > div 
			background-color: #1487FF;
			width: 80px;
			height: 80px;
			border-radius: 100%;
			margin: 2px;
			-webkit-animation-fill-mode: both;
			animation-fill-mode: both;
			display: inline-block;
			height: 180px;
			width: 180px;
			-webkit-animation: ball-scale 1s 0s ease-in-out infinite;
			animation: ball-scale 1s 0s ease-in-out infinite;
	@keyframes ball-scale 
		0% 
			-webkit-transform: scale(0)
			transform: scale(0)
		100% 
			-webkit-transform: scale(1)
			transform: scale(1)
			opacity: 0
</style>